<template>
    <div class="login-form">
        <!--v-bind可以简写为‘：’-->
        <el-form ref="loginform" :model="formData" :rules="rules">
            <el-form-item prop="username">
                <el-input v-model="formData.username" placeholder="请输入手机号码"></el-input>
            </el-form-item>
            <el-form-item prop="password">
                <el-input v-model="formData.password" placeholder="请输入密码" show-password></el-input>
            </el-form-item>
        </el-form>
        <!--justift：规定水平对齐方式
        end：表示向右对齐-->
        <el-row type="flex" justify="end">
            <el-button type="text" @click="fn">忘记密码</el-button>
        </el-row>
        <el-button class="login-btn" type="primary" @click="loginFn()">登录</el-button>
    </div>
</template>

<script>

export default {
    data() {
        return {
            formData: {
                //字段区什么名字？按后端字段名来取名
                username: '',//手机号码
                password: '',//密码
            },
            rules: {
                username: [
                    { required: true, message: '请输入手机号码', trigger: 'blur' },
                    { pattern: /^1[3-9]\d{9}$/,message:'手机号码格式不正确', trigger:['blur']}
                ],
                password: [
                    { required: true, message: '请输入密码',trigger: 'blur' }
                ]
            }
        }
    },
    mounted(){
        //通过refs方法来获取vue中组件标签，
        //给ref属性赋值，名字自取
        console.log(47,this.$refs.loginform)
    },
    methods:{
        fn(){
            this.$router.push("/user/ForgotPassword")
        },
        loginFn(){
            this.$refs.loginform.validate((valid)=>{
                if(valid){
                    console.log('校验成功')
                    //调用接口函数实现登录功能
                    this.$axios({
                        url:'/accounts/login',
                        method:'post',
                        data:{
                            username:this.formData.username,
                            password:this.formData.password
                        }
                    }).then(res=>{
                        console.log('登录成功',res)
                        //token是身份证，user是保存的用户相关信息
                        //因为以上信息通用该网站，所以得吧这些数据保存为全局数据。
                        //保存为全局数据：插件：vuex，默认有，store牧师是写全局变量的目录
                        //this.$store.commit（'文件名/函数名）,res.data插入的参数
                        this.$store.commit('user/SET_UserInfo',res.data)
                        //跳转首页
                        this.$router.replace('/')
                    })
                }else{
                    console.log('校验不通过')
                }
            }

            )
        }
    }
}
</script>

<style>
.login-form {
    padding: 20px;
}

.login-btn {
    width: 100%;
}
</style>